<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分区设置</title>
    <link rel="stylesheet" href="/resources/css/formSelects-v4.css"/>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script rel="stylesheet" src="/resources/layui/layui.js"></script>
    <script rel="stylesheet" src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/function/Local.js"></script>
</head>
<body>
<form class="layui-form" id="formone" action="">
    <div class="layui-inline">
        <label class="layui-form-label">关键字</label>
        <div class="layui-input-inline">
            <input type="text" name="guanjian" id="guanjian" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" onclick="states()" lay-submit="" lay-filter="demo1">查询</button>
</form>
<table id="demo" lay-filter="test"></table>
</body>
</html>
<script>
    var table,form,layer,laytpl;
    function states(){
        //执行重载
        table.reload('demo', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                guanjian : $("#guanjian").val()
            }
        });
    }
    layui.config({
        base: '/resources/js/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['table','form','formSelects','laytpl','layer'], function(){
        table = layui.table;
        form=layui.form;
        layer=layui.layer;
        laytpl=layui.laytpl;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: new Local().base_url+'/fenqv/show' //数据接口
            ,page: true //开启分页
            ,even : true
            ,toolbar:"#toolbarDemo"
            ,id : "demo"
            ,cols: [[ //表头
                {field:'id',width:'5%',type:'checkbox'}
                ,{field: 'id', title: 'ID'}
                ,{field: 'fangxiangId',width:'25%', title: '省 市 区',templet:function(d){
                    var str="空";
                    var quyv=d.quyv;
                    if(quyv!=null){
                        str=quyv.sheng+" > "+quyv.shi+" > "+quyv.qv;
                    }
                    return str;
                }}
                ,{field: 'guanjian', title: '关键字'}
                ,{field: 'qishi', title: '起始号'}
                ,{field: 'zhongzhi', title: '终止号'}
                ,{field: 'weizhi', title: '位置'}
                ,{title:'操作',toolbar: '#barDemo'}
            ]]
        });

        table.on('tool(test)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch(layEvent){
                case "edit":
                    $.get('add.html',function (s) {
                        //parent
                        layer.open({
                            type : 1,
                            title : '修改分区',
                            anim: 3,
                            area:'70%',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                $("#id").val(data.id);
                                $("#gj").val(data.guanjian);
                                $("#qishi").val(data.qishi);
                                $("#zhongzhi").val(data.zhongzhi);
                                $("#weizhi").val(data.weizhi);
                                var t =setInterval(function () {
                                    console.log("等待中....");
                                    if($("#fangxiangId option").length > 1){
                                        var $se=$("#fangxiangId");
                                        $se.val(data.fangxiangId);
                                        form.render();
                                        clearInterval(t);
                                    }
                                },100);
                                form.render();
                            }
                            ,yes:function(){
                                var str = $("#form").serialize();
                                $.post(new Local().base_url+"/fenqv/update",str,function(data){
                                    layer.close(layer.index);
                                    table.reload('demo');
                                    layer.msg("修改分区成功!");
                                });
                            }
                        });
                    });
                    break;
            }
        });
        table.on('toolbar(test)', function(obj) {
            switch (obj.event) {
                case 'add':
                    $.get('add.html',function (s) {
                        //parent
                        layer.open({
                            type : 1,
                            title : '添加新分区',
                            area:'70%',
                            anim: 3,
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                form.render();
                            }
                            ,yes:function(){
                                var str = $("#form").serialize();
                                $.post(new Local().base_url+"/fenqv/add",str,function(data){
                                    layer.close(layer.index);
                                    table.reload('demo');
                                    layer.msg("添加新分区成功!");
                                });
                            }
                        });
                    });
                    break;
            }
        });

    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
</script>
